import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import router from '@/route';
import { Provider } from 'react-redux';
import store from '@/store';
import Toast from './components/Toast';
import '@/assets/style/common.less';
import { Loading } from 'react-vant';
import './index.less';
import LoadingIcon from './components/Loading';
const rootEl = document.getElementById('root');
const root = ReactDOM.createRoot(rootEl!);
root.render(router);
// const root = ReactDOM.createRoot(
//   document.getElementById('root') as HTMLElement
// );
root.render(
  <Provider store={store}>
    {/* 通常会使用 Suspense 配合路由的懒加载 ， 可能进行懒加载的组件比较庞大，或者用户的网络不好，建议要使用一个等待的提示给用户  */}
    <Suspense
      fallback={
        <Loading
          size="50px"
          color="#2e57ff"
          vertical={true}
          className="loading"
        >
          加载中...
        </Loading>
      }
    >
      {router}
    </Suspense>
    {/* <LoadingIcon /> */}
    <Toast></Toast>
  </Provider>
);
